<template>
    <div class="upload-container">
        <div class="header">
            <div class="cancle" @click="$router.push('/home')">取消</div>
            <div class="up" @click="onSubmit">发布</div>
        </div>
        <van-form @submit="onSubmit">
            <van-field name="uploader" label="上传轮播图">
                <template #input>
                    <van-uploader v-model="uploadData.banner"  multiple :max-count="3"/>
                </template>
            </van-field>
            <van-field
                v-model="uploadData.title"
                name="标题"
                label="标题"
                placeholder="标题"
                :rules="[{ required: true, message: '请填写标题' }]"
            />
            <van-field name="checkboxGroup" label="请选择类型">
                <template #input>
                    <van-checkbox-group v-model="uploadData.iconMsg" direction="horizontal">
                    <van-checkbox name="1" shape="square">双月猪</van-checkbox>
                    <van-checkbox name="2" shape="square">架子猪</van-checkbox>
                    <van-checkbox name="2" shape="square">胖猪</van-checkbox>
                    <van-checkbox name="2" shape="square">猪妈妈</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <van-field
                v-model="uploadData.weight"
                name="重量"
                label="重量"
                placeholder="重量"
                :rules="[{ required: true, message: '请输入重量' }]"
            />
            <van-field
                v-model="uploadData.descMsg"
                rows="2"
                autosize
                label="描述"
                type="textarea"
                maxlength="200"
                placeholder="请输入描述"
                show-word-limit
            />
            <van-field
                readonly
                clickable
                name="area"
                :value="uploadData.address"
                label="地区选择"
                placeholder="地区选择"
                @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
                <van-area
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showArea = false"
                />
            </van-popup>
            <van-field name="uploader" label="上传详情图">
                <template #input>
                    <van-uploader v-model="uploadData.detailImg"  multiple/>
                </template>
            </van-field>
        </van-form>
        
    </div>
</template>

<script>
    import {areaList} from '@vant/area-data'
    export default {
        data() {
            return {
                uploadData: {
                    banner: [],
                    title: '',
                    iconMsg: '',
                    weight: '',
                    descMsg: '',
                    address: '',
                    detailImg: []
                },
                fileList: [],
                
                showArea: false,
                areaList,
            }
        },
        methods: {
            onConfirm(values) {
                this.value = values
                    .filter((item) => !!item)
                    .map((item) => item.name)
                    .join('/');
                this.showArea = false;
            },
            onSubmit(values) {
                console.log('submit', values);
            },
        },   
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .upload-container{
        width: 100%;
        height: 100%;
        >.header{
            width: 100%;
            height: 48px;
            font-size: .7rem;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            > .cancle{
                line-height: 48px;
            }
            > .up{
                border-radius: 13px;
                background-color: coral;
                width: 48px;
                height: 24px;
                margin-top: 12px;
                text-align: center;
                line-height: 24px;
            }
        }
        .van-checkbox--horizontal {
            margin-bottom: 5px;
        }
        > .content{
            padding: 10px 12px;
            height: calc(100% - 48px);
            width: 100%;
            .banner-title{
                font-size: .7rem;
                margin-bottom: 5px;
            }
        }
    }
</style>